<!doctype html>
<%@ page pageEncoding="UTF-8" isELIgnored="false" %>
<html  class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>友玩后台找回密码</title>
    <base href="${pageContext.request.contextPath}/">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        label{
            padding-left: 5px;
            font-weight: bold;
        }
    </style>
</head>
<body class="login-bg">

<div class="login layui-anim layui-anim-up">
    <div class="message">管理员密码找回<span style="padding-left: 40px; color: red">${msg}</span></div>
    <div id="darkbannerwrap"></div>

    <form action="#" method="post" class="layui-form"  id="formUrl">
        <input name="mob" placeholder="手机号"  type="text" class="layui-input"  id="mob" value="${mob}">
        <input name="yzm" placeholder="请输入验证码" type="text" style="width: 52%" id="yzm">
        <input value="获取验证码"  style="width: 47%;" type="button" name="btn" class="btn" disabled>
        <%--<hr class="hr15">--%>
        <input name="password1" placeholder="密码"  type="password" class="layui-input" id="pswfirst">
        <input name="password2" placeholder="密码确认"  type="password" class="layui-input" id="pswtwo">
        <%--<hr class="hr15">--%>
        <%--<div>--%>
            <%--<input name="verifyCode" style="width: 100px;" class="txt" type="text" placeholder="输入验证码" />--%>
            <%--<img style="padding-top:5px;padding-left:40px;height: 42px;vertical-align: top" src="GetVerifyCodeAction" onclick='changeCode(this)'>--%>
            <%--<span style="color: #E04D4B">${errors.verifyCode}</span>--%>
        <%--</div>--%>
        <input value="修改密码"  style="width:100%;" type="submit" id="update">
        <%--<hr class="hr20" >--%>
    </form>
</div>

<script>
    // function changeCode(obj){
    //     var src = " GetVerifyCodeAction?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存
    //     obj.src=src;
    // }

    var boolMob = false;
    var boolYzm = false;
    var boolPsw1 = false;
    var boolPsw2= false;
    //ajax 手机号验证，失去焦点
    $(function () {
        $("#mob").blur(function () {
            var $mob = $('input[name="mob"]').val();
            var pattern = /^1[34578]\d{9}$/;
            if(pattern.test($mob)){
                $(this).css("border-color","#27D4C9");
                $(".btn").prop("disabled",false);
                boolMob = true;
            }else {
                $(this).css("border-color","red");
                $(".btn").prop("disabled",true)
            }
        });

        $(".btn").click(function () {
            var $mob = $('input[name="mob"]').val();
            var xmlHttp=new XMLHttpRequest();
            var url="GetSmsCodeAction?mob="+$mob;
            xmlHttp.open("GET",url,true);
            xmlHttp.send();
            alert("验证码发送成功");

        })

        //判断验证码输入框
        $("#yzm").blur(function () {
            var yzm = $('input[name="yzm"]').val();
            var pattern = /^\d{6}$/;
            if(pattern.test(yzm)){
                boolYzm = true
                $(this).css("border-color","#27D4C9");
            }else {
                $(this).css("border-color","red");
            }
        });


        $("#pswfirst").blur(function () {
            var psw1 = $('input[name="password1"]').val();
            var pattern = /^\d{4,9}$/;
            if(pattern.test(psw1)){
                $(this).css("border-color","#27D4C9");
            }else {
                $(this).css("border-color","red");
            }
        });
        $("#pswtwo").blur(function () {
            var psw1 = $('input[name="password1"]').val();
            var psw2 = $('input[name="password2"]').val();
            var pattern = /^\d{4,9}$/;
            if(pattern.test(psw2) && psw1 == psw2){
                boolPsw1 = true;
                boolPsw2 = true;
                $(this).css("border-color","#27D4C9");
                $("#pswfirst").css("border-color","#27D4C9");
            }else {
                $("#pswfirst").css("border-color","red");
                $(this).css("border-color","red");
            }
        });

        $("#update").click(function () {
            if(boolMob && boolYzm && boolPsw1 && boolPsw2){
                $("#formUrl").attr("action","FindPassword?act=update").submit();
                // $("#formUrl").submit();
            }else {
                $("#formUrl").attr("action","findPassword.jsp").submit();
                alert("请将信息填写完成")
            }
        })
    })
</script>
</body>
</html>